<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" label-width="100px" :model="form" :rules="rules">
      <el-form-item label="上级菜单" prop="menu_pid">
        <el-cascader
          v-model="form.menu_pid"
          clearable
          :options="treeData"
          placeholder="请选择上级菜单"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item label="菜单标题" prop="menu_name">
        <el-input v-model="form.menu_name" placeholder="菜单标题" />
      </el-form-item>
      <el-form-item label="URL路径" prop="menu_path">
        <el-input v-model="form.menu_path" placeholder='以"/"为开头的URL路径' />
      </el-form-item>
      <el-form-item label="文件路径" prop="menu_page">
        <el-input
          v-model="form.menu_page"
          placeholder="views文件夹下的文件路径,路径包含views"
        />
      </el-form-item>
      <el-form-item label="菜单图标" prop="menu_icon">
        <el-popover
          popper-class="icon-selector-popper"
          trigger="hover"
          width="292"
        >
          <template #reference>
            <el-button>
              <vab-icon :icon="form.menu_icon" />
              图标选择器
              <vab-icon icon="arrow-down-s-line" />
            </el-button>
          </template>
          <icon-selector @handle-icon="handleIcon" />
        </el-popover>
      </el-form-item>
      <el-form-item label="排序">
        <el-input-number
          v-model="form.sort"
          :step="1"
          step-strictly
          @change="numberChange"
        />
      </el-form-item>
      <el-form-item v-if="title == '编辑'" label="状态" prop="status">
        <el-switch
          v-model="form.status"
          active-text="显示"
          :active-value="1"
          inactive-text="隐藏"
          :inactive-value="0"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import iconSelector from '@/components/iconSelector'
import { doEdit, getTree, addTree, getTreeDetail } from '@/api/rule'

export default {
  name: 'MenuEdit',
  components: { iconSelector },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'sub_menu',
        label: 'menu_name',
        value: 'id',
        checkStrictly: true,
        emitPath: false,
      },
      form: {
        menu_pid: 0,
        menu_name: '',
        menu_path: '',
        menu_page: '',
        menu_icon: '#',
        sort: 0,
      },
      rules: {
        menu_name: [
          { required: true, trigger: 'blur', message: '请输入菜单标题' },
        ],
        menu_path: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入以“/”为开头的URL路径',
          },
        ],
        menu_page: [
          {
            required: true,
            trigger: 'blur',
            message: '请输入以“/”为开头的文件路径',
          },
        ],
      },
      title: '',
      dialogFormVisible: false,
    }
  },
  methods: {
    async fetchData() {
      const { data } = await getTree({})
      this.treeData = data.items.length > 0 ? data.items : []
    },
    numberChange(value) {
      this.form.sort = value
      this.$forceUpdate()
    },
    handleNodeClick(node) {
      this.form.menu_pname = node.menu_name
      this.form.menu_pid = node.id
      this.$forceUpdate()
    },
    handleIcon(item) {
      this.form.menu_icon = item
    },
    async showEdit(row) {
      if (!row) {
        this.title = '添加'
      } else {
        this.title = '编辑'
        let rowData = JSON.parse(JSON.stringify(Object.assign({}, row)))
        this.form = {
          id: rowData.id,
          menu_id: rowData.id,
          menu_pid: rowData.menu_pid,
          menu_name: rowData.menu_name,
          menu_path: rowData.menu_path,
          menu_page: rowData.menu_page,
          menu_icon: rowData.menu_icon,
          status: rowData.menu_status,
          sort: rowData.menu_sort,
        }
        const { data } = await getTreeDetail({ menu_id: row.menu_pid })
        this.form.menu_pname = data.info.menu_name
      }
      this.dialogFormVisible = true
      this.fetchData()
    },
    close() {
      this.$refs['form'].resetFields()
      this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      if (this.title == '添加') {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { data } = await addTree(this.form)
            if (data.is_success) {
              this.$baseMessage(
                '添加成功',
                'success',
                'vab-hey-message-success'
              )
              this.$emit('fetch-data')
              this.close()
            }
          }
        })
      } else if (this.title == '编辑') {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { data } = await doEdit(this.form)
            if (data.is_success) {
              this.$baseMessage(
                '编辑成功',
                'success',
                'vab-hey-message-success'
              )
              this.$emit('fetch-data')
              this.close()
            }
          }
        })
      }
    },
  },
}
</script>
